<script lang="ts" setup>
import { ref } from "vue";
import xlkTabBar from "../components/tab-bar.vue"

const items = ref<string[]>([
    '天天五折',
    '会员权益',
    '会员权益',
    '会员权益',
    '会员权益',
    '会员权益',
    '会员权益',
    '会员权益',
])
</script>

<template>
    <umrp-page :safe-area="150"
        bg-color="linear-gradient(to bottom, #1890ff30 0% , #1890ff10 20%, #1890ff10 20%,#fff 100%)">
        <umrp-title-bar>
            <umrp-text bold>教培小蓝卡</umrp-text>
        </umrp-title-bar>
        <umrp-container padding="10px">
            <umrp-image :height="140"></umrp-image>
            <umrp-container :gap="10" padding="16px 0">
                <umrp-text :size="16" bold>会员权益</umrp-text>
                <umrp-grid :cols="2" :row-gap="16" :col-gap="16">
                    <umrp-grid-item v-for="item in items">
                        <umrp-placeholder width="100%" :height="100">{{ item }}</umrp-placeholder>
                    </umrp-grid-item>
                </umrp-grid>
            </umrp-container>
        </umrp-container>
        <umrp-action-bar :bottom="58">
            <umrp-container :gap="10" padding="16px" bg-color="#fff">
                <umrp-button type="primary">开通连续包月￥9.90</umrp-button>
                <umrp-checkbox>
                    <umrp-text :size="12">开通会员代表接受《付费会员服务协议》《自动续费说明》</umrp-text>
                </umrp-checkbox>
            </umrp-container>
        </umrp-action-bar>
        <xlk-tab-bar />
    </umrp-page>
</template>